<template>
  <div class="ParamsConfig">
    <CY-Screen>
      <div class="operationWrap">
        <div class="operationLeft">
          <el-radio-group
              v-model="pkg"
              @input="search"
              size="mini"
          >
            <el-radio-button label="qihuo">期货</el-radio-button>
          </el-radio-group>
        </div>
        <div class="operationRight">
          <el-button
              size="mini"
              type="success"
              icon="el-icon-document-checked"
              round
              @click="submit"
          >保存配置</el-button
          >
          <el-button
              size="mini"
              type="primary"
              round
              icon="el-icon-refresh"
              @click="search"
              style="margin-right: 10px"
          >刷新数据</el-button
          >
        </div>
      </div>
    </CY-Screen>
    <CY-Screen v-loading="pageLoading">
      <div class="pageInfoContent">
        <div
            class="pageInfoItem"
            v-for="(item, key) in pageInfoList"
            :key="key"
        >
          <div class="prepageInfoLabel">
            {{item.isChange?'*':''}}
          </div>
          <div class="pageInfoLabel">
            <div class="pageInfoLabelCN">{{ item.cn }}</div>
            <div class="pageInfoLabelEN">{{ item.en }}</div>
          </div>
          <div class="pageInfoValue" v-if="Object.prototype.toString.call(item.value)==='[object Boolean]'">
            <el-radio-group v-model="item.domValue">
              <el-radio-button label="false" class="rClose">关闭</el-radio-button>
              <el-radio-button label="true">开启</el-radio-button>
            </el-radio-group>
          </div>
          <div class="pageInfoValue" v-else-if="Object.prototype.toString.call(item.value)==='[object Number]'">
            <el-input
                v-model="item.domValue"
                type="number"
                style="max-width: 150px"
            ></el-input>
          </div>
          <div class="pageInfoValue" v-else-if="Object.prototype.toString.call(item.value)==='[object String]'&&item.domValue.length<20">
            <el-input
                v-model="item.domValue"
                style="max-width: 300px"
            ></el-input>
          </div>
          <div class="pageInfoValue" v-else>
            <textarea style="width: 100%;" v-model="item.domValue"></textarea>

          </div>

        </div>
      </div>
    </CY-Screen>
  </div>
</template>
<script>
import _ from "lodash"
import CacheRequest from "/@/utils/CacheRequest";
import request from "/@/utils/request";
const getData=async (data)=>{
  //缓存300秒
  return await CacheRequest(async function (){
    const res=await request({
      url: '/api/getData',
      method: 'post',
      data:data,
    })
    if(res.code===0){
      return res.data
    }else{
      throw res.msg
    }
  },JSON.stringify(data),1)
}
function JSONToPathArr(data){
  const resArr=[]
  const pArr=['']
  const list=[data]
  for(let i=0;i<list.length;i++){
    const json=list[i]
    for(let k in json){
      const path=pArr[i]?pArr[i]+'.'+k:k
      if(Object.prototype.toString.call(json[k])==='[object Object]'){
        pArr.push(path)
        list.push(json[k])
      }else{
        resArr.push({
          path,
          value:json[k],
        })
      }

    }
  }
  return resArr
}
export default {
  components: {},
  data() {
    return {

      app_name: "",
      pkg_name: "",
      pkg: "qihuo",
      pageLoading: false, //表格加载loading
      pageInfoList: [],
      mysqlConfig:null,
      oriConfig:null,
      sqlConfig:null,
    };
  },
  async mounted() {

    await this.search()

  },
  methods: {
    async search() {
      this.pageLoading = true;
      const config= await getData({
        pkg:this.pkg,
        method:'getConfig'
      })
      const pathArr=JSONToPathArr(config)
      const pageInfoList=[]
      pathArr.forEach(function (item){
        item.en=item.path
        item.cn=item.path
        if(Object.prototype.toString.call(item.value)==='[object String]'){
          item.domValue=item.value
        }else{
          item.domValue=JSON.stringify(item.value)
        }
        pageInfoList.push(item)
      })
      this.pageInfoList=pageInfoList
      this.pageLoading = false
    },

    async submit() {
      try {
        const config={}
        for(let i=0;i<this.pageInfoList.length;i++){
          const item=this.pageInfoList[i]
          if(Object.prototype.toString.call(item.value)==='[object String]'){
            item.value=item.domValue
          }else{
            item.value=JSON.parse(item.domValue)
          }
          _.set(config,item.path,item.value)
        }
        const configStr=JSON.stringify(config)

        const res=await this.$confirm("将修改保存为运营配置?", "提示", {})
        if(res){
          await getData({
            pkg: this.pkg,
            method: 'updateConfig',
            configStr: configStr
          });
          this.$message.success("保存成功！");
        }

      }catch (e){
        this.$message.error('格式错误');
      }

    },
  },
};
</script>
<style lang="scss">
.ParamsConfig {
  padding: 20px;
  .operationWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .operationLeft {
      display: flex;
      align-items: center;
    }
    .operationRight {
      display: flex;
      align-items: center;
    }
  }
  .pageInfoContent {
    display: flex;
    flex-wrap: wrap;
    padding-top: 15px;
    .pageInfoItem {
      width: 660px;
      display: flex;
      align-items: center;
      margin: 0 15px 15px 0;
      .prepageInfoLabel{
        color: orange;
      }
      .pageInfoLabel {
        width: 240px;
        text-align: right;
        margin-right: 15px;
        .pageInfoLabelCN {
          font-size: 14px;
          font-weight: bold;
          color: #333;
        }
        .pageInfoLabelEN {
          font-size: 10px;
          color: #999;
        }
      }
    }
  }
  .rClose {
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background: #f56c6c;
      border-color: #f56c6c;
      box-shadow: -1px 0 0 0 #f56c6c;
    }
  }
}

</style>
